<%--
  Created by IntelliJ IDEA.
  User: Eric
  Date: 2019/9/28
  Time: 20:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="${path}/plugins/bootstrap/css/bootstrap.css" type="text/css">
    <!-- 引入外部的css样式 -->
    <link rel="stylesheet" href="${path}/plugins/bootstrap/css/animate.css" type="text/css">
    <link rel="stylesheet" href="${path}/plugins/bootstrap/css/font-awesome.css?v=4.4.0" type="text/css">
    <!-- 引用自己写的css样式 -->
    <link href="../../css/index/index.css" rel="stylesheet" type="text/css">


    <link rel="stylesheet" type="text/css" href="${path}/css/daoyou/jquery.step.css">

    <title>下订单</title>

    <style>
        .text_1 {

            margin: 0 auto;
            width: 90%;
            text-indent: 30px;
            font-size: 20px;
        }

        .button_ss {
            text-align: right;
            margin-top: 10px;
            padding-right: 220px;

        }
    </style>
</head>

<body>

<%@include file="../common/nav_top.jsp"%>
<!-- 进度条 -->
<div class="step-body" id="myStep">
    <div class="step-header" style="width:80%">
        <ul>
            <li>
                <p>用户须知</p>
            </li>
            <li>
                <p>填写申请表</p>
            </li>
            <li>
                <p>待确认</p>
            </li>
            <li>
                <p>待核销</p>
            </li>
            <li>
                <p>旅行结束</p>
            </li>
        </ul>
    </div>
    <div class="step-content">
        <div class="step-list"></div>
        <div class="step-list"></div>
        <div class="step-list"></div>
        <div class="step-list"></div>
        <div class="step-list"></div>
        <div class="step-list"></div>
        <div class="step-list"></div>
        <div class="step-list"></div>
    </div>

</div>

<button id="goBtn" value="2" style="display:none">跳转的指定的步骤</button>
<!-- 进度条end -->


<div  style="height: 600px;">
<!-- 用户须知 -->
<div class="container-fluid" id="text_1" style="display: block">
    <div class="row">

        <div id="head_1"
             style="height: 500px;width:1000px;margin: 0 auto; background-color: antiquewhite;padding-top:20px">

            <div style="text-align:center;color:black">
                <small style="margin-top:50px;font-size:30px;">用户须知</small>
            </div>

            <diV class="text_1">
                为了提高员工外出旅游的安全意识，强化员工的纪律观念和法律意识，明确员工人身伤害事故发生时公司与员工双方的责任，保护员工和公司的合法权益，保证工作的顺利进行。员工和公司双方自愿签订如下协议：
            </diV>
            <div style=" overflow-y:auto; overflow-x:auto; width:1000px; height:300px; margin-top: 30px;">
                <div class="text_1">
                    甲 方: ***男士
                </div>
                <div class="text_1">
                    乙 方：山西泰舆生物材料有限公司
                </div>

                <div class="text_1">
                    第一条：甲方自愿参加乙方平台旅游，并承诺遵守本协议之规定。
                </div>
                <div class="text_1">
                    第二条：甲方旅游可能出现的个人安全、经济、疾病等不可预测因素，乙方不承担任何责任，由甲方自己承担。
                </div>
                <div class="text_1">
                    第三条：甲方不得擅自离开团队，给集体或团队带来不必要的麻烦，否则后果自负。
                </div>
                <div class="text_1">
                    第四条：在旅游期间发生事故及责任，甲方使本人或他人人身、财产等造成的伤害，乙方不承担任何责任。
                </div>
                <div class="text_1">
                    第五条：甲方应切实注意个人财产安全，不得非法占有他人财物，因自身原因保管不善而造成财产损失的，由甲方自行负责，乙方不承担任何责任。
                </div>
                <div class="text_1">
                    第六条：如甲方给他人造成损害的，由甲方个人承担一切赔偿责任。
                </div>
                <div class="text_1">
                    第七条：甲方应切实严格遵守交通规则，出现交通事故的，由肇事方负责，乙方不承担任何责任。
                </div>
                <div class="text_1">
                    第八条：甲方具有完全民事行为能力并自愿参加。愿独立承担可能发生的一切损害。途中因本人游玩出现的任何事故及责任均自行负责。
                </div>
                <div class="text_1" style="text-align: right">
                    <input type="checkbox" onclick="use(this)"> 我已同意
                </div>
            </div>

        </div>


    </div>

    <div class="button_ss">
        <button id="nextBtn" type="button" class="btn btn-default" onclick="nextBtn()"
                disabled="disabled ">下一步</button>
    </div>
</div>


<!-- 填写表单 -->
<div class="container-fluid" id="text_2" style="display:none;">
    <div class="row" style="margin-left: 26%">
        <div class="col-md-8" style="background-image: url('${path}/imgs/travler/letter_bg.png') ; ">


            <div class="container">
                <div class="rows">
                    <div style="margin-top:30px;font-size: 14px;">
                        <span style="margin-left:20px;text-align: center">导游出行路线参考,请您预约成功之后与导游取得联系确定行程</span>
                        <span class="col-md-12 text-primary" style="margin-top: 5px" >
                            ${guideRoute.guideText}
                        </span>
                    </div>
                </div>
            </div>
            <div class="rows">
            <!-- onsubmit="return check() -->
            <form  id="form1" class="form-horizontal"  onsubmit="return false" action="${path}/guide/approximately" name="loginForm" method="post">

                <div class="form-group" style="margin-top:30px;">
                    <label class="col-sm-2 control-label">出行人姓名</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="username" id="nums">
                    </div>

                    <label class="col-sm-2 control-label" id="c1"
                           style="color: red;font-size:10px;text-align: left;display: none">*名字不能为空</label>

                </div>

                <div class="form-group" style="margin-top:30px;">
                    <label class="col-sm-2 control-label">联系方式</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="phone" id="phones"><span style="color: grey;font-size: 10px">*填写可联系的手机号码</span>
                    </div>
                    <label class="col-sm-2 control-label" id="c2"
                           style="color: red;font-size:10px;text-align: left;display: none">*请正确填写手机号码</label>

                </div>

                <div class="form-group" style="margin-top:30px;">
                    <label class="col-sm-2 control-label">出发日期</label>
                    <div class="col-sm-4">
                        <input id="hello" class="laydate-icon form-control layer-date" name="goDate">
                    </div>
                    <label class="col-sm-2 control-label" id="c3"
                           style="color: red;font-size:10px;text-align: left;display: none">请正确选择日期</label>

                </div>

                <div class="form-group" style="margin-top:30px;">
                    <label class="col-sm-2 control-label">游玩天数</label>
                    <div class="col-sm-4" id="dayss">
                        <select class="form-control" id="t" name="days">
                            <option value="1">1天</option>
                            <option value="2">2天</option>
                            <option value="3">3天</option>
                            <option value="4">4天</option>
                        </select>
                    </div>

                </div>

                <input style="display: none" name="guideId" value="${daoyou}">
                <div class="form-group" style="margin-top:30px; ">
                    <label class="col-sm-2 control-label">出行人数</label>
                    <div class="col-sm-4">
                        <select class="form-control" id="peopless" name="peoples">
                            <option value="1">1人</option>
                            <option value="2">2人</option>
                        </select>
                    </div>
                </div>

                <div class="form-group" style="margin-top:30px;text-align:right">
                    <div class="col-sm-4" style="margin:0 auto;margin-left: 30px;">
                        <button type="submit" onclick="check()" style="font-size:15px;" class="btn btn-success"
                                value="3">提交</button>
                    </div>
                </div>

            </form>
            </div>
        </div>

    </div>

</div>
<!-- 填写表单end -->


<!--待审核 -->
<div id="text_3" class="container-fluid" style="display:none">

    <div class="row" style="margin-left: 35%;margin-top: 150px">

        <div style="float:left">

            <img src="http://pzgv309jp.bkt.clouddn.com/b2cebc17-11ec-4327-bf9e-a1f4ff2c851d.png" width="50" height="50">
        </div>
        <div  style="float:left;margin-top: 20px;margin-left: 10px">
            正在飞快为您取得联系，我们第一时间会短信通知您~
        </div>
        <%--<div style="clear: both;margin-top: 80px;margin-left: 60px">--%>
            <%--<img src="http://py5ztkhmu.bkt.clouddn.com/79d60189-c017-4374-bcb2-48d41b054644.png"  width="200" height="200">--%>
        <%--</div>--%>

        <div class="col-md-12" style="margin-top:25px;text-align: center">
            <button  class="btn btn-success" onclick="mystart()">返回</button>
        </div>

    </div>

</div>


<!-- 二维码-->
<div id="text_4"  class="container-fluid" style="display:none; background-color: #F7F9F7;height: 500px; ">
    <div class="row" style="margin-left: 35%;margin-top: 150px">
        <div  style="float:left;margin-left: 10px;">
            此二维码用于导游核销，订单结束之后会自动失效
        </div>
        <div style="clear: both;margin-top: 30px;margin-left: 60px">
            <img src="${path}/imgs/travler/ewm.png"  width="200" height="200">
        </div>
        <p style="margin-left:20px;margin-top:50px;font-size:20px;font-family: Microsoft YaHei">
            订单编号:15555272829903030
        </p>




    </div>

</div>




</div>


<%@include file="../common/nav_bottom.jsp"%>

<script>




    // 控制button
    function use(obj) {
        var bu = document.getElementById("nextBtn");
        if (obj.checked) {
            bu.disabled = !"disabled ";
            bu.className = "btn btn-primary";
        } else {
            bu.disabled = "disabled ";
        }

    }


    //  下一步
    function nextBtn() {
        document.getElementById("text_1").style = "display:none";
        document.getElementById("text_2").style = "display:block";
    }


    function isPoneAvailable(poneInput) {
        var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
        if (!myreg.test(poneInput)) {
            return false;
        } else {
            return true;
        }
    }
    //日期比较
    function compareDate(date1, date2) {
        var date1 = new Date(date1);
        var date2 = new Date(date2);
        if (date1.getTime() > date2.getTime()) {
            return true;
        } else {
            return false;
        }
    }

    //获取当前时间

    function getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
    }

    // 表单提交
    function check() {
        var name = document.getElementById("nums").value.trim(); //名字

        if (name.length == 0) {
            document.getElementById("c1").style = "color: red;font-size:10px;text-align: left;display:block";

        }

        var today = getNowFormatDate();


        var phone = document.getElementById("phones").value.trim(); //手机号

        var phons = false;
        if (phone.length != 0) {
            if (isPoneAvailable(phone)) {

                phons = true;
            } else {
                document.getElementById("c2").style.display = "block";
            }

        } else {
            phons = false;
            document.getElementById("c2").style = "color: red;font-size:10px;text-align: left;display:block";
        }
        var date = document.getElementById("hello").value.trim();
        var daaa = false;
        if (date.length == 0) {

            document.getElementById("c3").style = "color: red;font-size:10px;text-align: left;display:block";
        } else {
            daaa = compareDate(date, today);
            if(daaa==false){
                document.getElementById("c3").style = "color: red;font-size:10px;text-align: left;display:block";
            }
        }


        var t = document.getElementById("t").value;
        var peoples = document.getElementById("peopless").value;

        if (nums.length != 0 && phons && daaa) {


          $.post("${path}/guide/approximately",$('#form1').serialize(),function (data) {
              if(data.flag){
                  document.getElementById("text_2").style = "display:none";
                  document.getElementById("goBtn").value = "3";
                  document.getElementById("goBtn").click(); //自动促发一个点击时间
                  document.getElementById("text_3").style = "display:block";
                  token=data.data;
                  return;
              }
              if(data.message == '您以下单'){
                  alert("您已经下单,不可重复预约");
                  return;
              }
              if(data.message=='表单提交错误'){
                  alert("您提交错误");
                  return;
              }
              if(data.message=='时间冲突,导游不可预约'){
                  alert("导游已经有预约了,请您重新选择日程");
              }

              if(data.message=='不可自己预约自己'){
                  alert("不可自己预约自己");
              }
          })
            return true;
        } else {
            console.log("no");
            console.log(name + " " + phone + " " + peoples + " " + t + " " + date);
            return false;
        }

    }


</script>


<!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
<script src="${path}/plugins/jquery/jquery.min.js"></script>

<script src="${path}/js/daoyou/jquery.min.js"></script>
<script src="${path}/js/daoyou/jquery.step.js"></script>
<!--引入bootstrap的js文件-->
<script src="${path}/plugins/bootstrap/js/bootstrap.js"></script>




<!-- 日期 -->
<script src="${path}/H+/js/bootstrap.min.js?v=3.3.6"></script>
<script src="${path}/H+/js/plugins/layer/laydate/laydate.js"></script>
<script>
    //外部js调用
    laydate({
        elem: '#hello', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
        event: 'focus' //响应事件。如果没有传入event，则按照默认的click
    });

    //日期范围限制
    var start = {
        elem: '#start',
        format: 'YYYY/MM/DD hh:mm:ss',
        min: laydate.now(), //设定最小日期为当前日期
        max: '2099-06-16 23:59:59', //最大日期
        istime: true,
        istoday: false,
        choose: function (datas) {
            end.min = datas; //开始日选好后，重置结束日的最小日期
            end.start = datas //将结束日的初始值设定为开始日
        }
    };
    var end = {
        elem: '#end',
        format: 'YYYY/MM/DD hh:mm:ss',
        min: laydate.now(),
        max: '2099-06-16 23:59:59',
        istime: true,
        istoday: false,
        choose: function (datas) {
            start.max = datas; //结束日选好后，重置开始日的最大日期
        }
    };
    laydate(start);
    laydate(end);

    function mystart() {
        var url="${path}/guide/page"
        window.location=url;
    }
</script>
<!-- 日期end -->
</body>

</html>